<template>
  <div class="login-container">
    <transition name="fade">
      <header class="active-1" v-if="markerOverIndex == 1">
        <img src="./../../assets/images/zs-logo.png" alt />
      </header>
    </transition>
    <transition name="fade">
      <header class="active-2" v-if="markerOverIndex == 2">
        <img src="./../../assets/images/zs-logo.png" alt />
      </header>
    </transition>
    <transition name="fade">
      <header class="active-3" v-if="markerOverIndex == 3">
        <img src="./../../assets/images/zs-logo.png" alt />
      </header>
    </transition>
    <transition name="fade">
      <content class="active-1" v-if="markerOverIndex == 1"></content>
    </transition>
    <transition name="fade">
      <content class="active-2" v-if="markerOverIndex == 2"></content>
    </transition>
    <transition name="fade">
      <content class="active-3" v-if="markerOverIndex == 3"></content>
    </transition>
    <div class="box clearfix">
      <div class="left fl">
        <div class="marker">
          <i @mouseenter="markerOver(1)" :class="{active: markerOverIndex == 1}"></i>
          <i @mouseenter="markerOver(2)" :class="{active: markerOverIndex == 2}"></i>
          <i @mouseenter="markerOver(3)" :class="{active: markerOverIndex == 3}"></i>
        </div>
      </div>
      <div class="right fr">
        <div class="login">
          <el-form
            class="login-form"
            :model="loginForm"
            :rules="loginRules"
            ref="loginForm"
            label-position="left"
            size="medium"
          >
            <el-row :gutter="4">
              <el-col :span="24" class="welcome">
                <span>欢迎登录</span>
              </el-col>
              <el-col :span="24">
                <el-form-item prop="username">
                  <el-input
                    class="login_username"
                    name="username"
                    type="text"
                    v-model.trim="loginForm.username"
                    placeholder="用户名"
                    clearable
                  >
                    <d2-icon slot="prepend" name="fa fa-user-circle-o" />
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item prop="password">
                  <el-input
                    name="password"
                    :type="passwordType"
                    @keyup.enter.native="handleLogin"
                    v-model.trim="loginForm.password"
                    auto-complete="on"
                    placeholder="密码"
                    clearable
                  >
                    <d2-icon slot="prepend" name="unlock-alt" />
                    <!--<el-button-->
                    <!--type="primary"-->
                    <!--size="medium"-->
                    <!--slot="append"-->
                    <!--class="iconfont"-->
                    <!--:class="pwdTypeClass"-->
                    <!--style="font-size: 24px;padding-left: 5px;padding-right: 5px"-->
                    <!--@click="changePwdType"-->
                    <!--/>-->
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16" v-if="errorLoginCount>3">
                <el-form-item prop="validCode" class="yzcode">
                  <el-input
                    name="validcode"
                    type="text"
                    v-model.trim="loginForm.validCode"
                    @keyup.enter.native="handleLogin"
                    auto-complete="on"
                    prefix-icon="iconfont icon-yanzhengma"
                    placeholder="验证码"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8" style="text-align: end" v-if="errorLoginCount>3">
                <div style="display: flex;margin-top: 0px;align-content: end">
                  <div style="flex: 1" />
                  <s-identify
                    :identifyCode="identifyCode"
                    :contentWidth="80"
                    :contentHeight="30"
                    :fontSizeMax="24"
                    :fontSizeMin="12"
                  />
                  <el-button
                    type="text"
                    class="el-icon-refresh"
                    style="font-size: 20px;padding: 0"
                    @click="makeCode"
                  />
                </div>
              </el-col>
              <el-col :span="24">
                <el-button
                  size="medium"
                  type="primary"
                  style="width:100%;"
                  :loading="loading"
                  @click.native.prevent="handleLogin"
                >登录</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="code">
          <img src="./../../assets/images/zs-code.jpg" alt />
        </div>
      </div>
    </div>
    <footer>
      <span>OPYRIGHT</span>
      <span>EOC云平台&nbsp;&nbsp;moc.ddmg.com</span>
      <span>湘ICP备15003105号</span>
    </footer>
  </div>
</template>
<script>
import * as HttpServices from "@/api/HttpServices";
import SIdentify from "@/components/identify";
import chooseBill from "./components/chooseBill";
import "@/utils/transform";
import { RULES } from "@/utils/validate";
import storage from "@/utils/storage";
import dayjs from "dayjs";

export default {
  name: "login",
  components: {
    SIdentify,
    chooseBill
  },
  data() {
    return {
      year: dayjs().format("YYYY"),
      isMobile: false,
      loading: false,
      loginForm: {
        username: "",
        password: ""
      },
      errorLoginCount: storage.getStorage("errorLoginCount") || 0,
      loginRules: {
        username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 6, max: 18, message: "密码长度在6到18个字符", trigger: "blur" }
        ],
        validCode: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("验证码不能为空"));
              } else if (value !== this.identifyCode) {
                callback(new Error("验证码不正确!"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      },
      pwdTypeClass: "icon-xianshimima",
      passwordType: "password",
      identifyCodes: "1234567890",
      identifyCode: "",
      isInitRevealData: true,
      isTransform: false,
      markerOverIndex: 1,
      scrollTimer: null,
      listLen1: 0,
      listLen2: 0,
      revealDatas: {
        active_customers: 0,
        total_credit_amount: 0
      },
      new_customers_list: [],
      new_credit_customers_list: []
    };
  },
  created() {
    this.identifyCode = "";
    this.makeCode();
    this.initRevealData();
    console.log("login");
  },
  methods: {
    // 初始化展示数据
    initRevealData() {},
    // 开启无缝滚动
    startSeamlessScroll() {
      let boundary1 = -(this.listLen1 * 62);
      let boundary2 = -(this.listLen2 * 62);
      this.scrollTimer = setInterval(() => {
        let { list1, list2 } = this.$refs;
        if (this.listLen1 > 6) {
          if (list1.translateY > boundary1) {
            list1.translateY--;
          } else {
            list1.translateY = 0;
          }
        }
        if (this.listLen2 > 6) {
          if (list2.translateY > boundary2) {
            list2.translateY--;
          } else {
            list2.translateY = 0;
          }
        }
      }, 60);
    },

    markerOver(index) {
      if (this.isTransform) {
        if (index === 2 && this.scrollTimer == null) {
          setTimeout(this.startSeamlessScroll, 700);
        } else {
          setTimeout(this.closeSeamlessScroll, 700);
        }
      }
      this.markerOverIndex = index;
    },
    makeCode() {
      this.identifyCode = "";
      for (let i = 0; i < 4; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    // changePwdType() {
    //   if (this.passwordType === "password") {
    //     this.passwordType = "text";
    //     this.pwdTypeClass = "icon-yincangmima";
    //   } else {
    //     this.passwordType = "password";
    //     this.pwdTypeClass = "icon-xianshimima";
    //   }
    // },
    forgetPwd() {
      this.$router.push({
        name: "forgetPwd"
      });
    },
    registerNow() {
      this.$store.dispatch("d2admin/account/logout").then(() => {
        this.$router.push({ name: "register" });
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("d2admin/account/LoginByUsername", {
              vm: this,
              username: this.loginForm.username,
              password: this.loginForm.password
            })
            .then(({ isLogin, empList }) => {
              this.loading = false;
              storage.setStorage("errorLoginCount", 0);
              this.errorLoginCount = 0;
              if (isLogin == 2) {
                let dataList = [];
                for (const key in empList) {
                  dataList = [...dataList, ...empList[key]];
                }
                const payload = {
                  id: dataList[0].id,
                  username: this.loginForm.username
                };
                this.$store
                  .dispatch("d2admin/account/selectByAccount", {
                    vm: this,
                    payload
                  })
                  .catch(error => {
                    console.log(error);
                    this.visible = false;
                  });
              }
            })
            .catch(e => {
              console.log(e);
              this.loading = false;
              const errorCount = (storage.getStorage("errorLoginCount") || 0) + 1;
              storage.setStorage("errorLoginCount", errorCount);
              this.errorLoginCount = errorCount;
              this.makeCode();
            });
        } else {
          const errorCount = (storage.getStorage("errorLoginCount") || 0) + 1;
          storage.setStorage("errorLoginCount", errorCount);
          this.errorLoginCount = errorCount;
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.login-container p,
h1,
h2,
h3,
h4,
h5,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.login-container header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 77px;
  line-height: 77px;
  background: url(./../../assets/images/zs-bg1-top.jpg) no-repeat left top;
  background-size: 100% 100%;
}
.login-container header img {
  margin-left: 20px;
  margin-top: 15px;
  width: 175px;
  height: 39px;
}
.login-container content {
  position: fixed;
  left: 0;
  right: 0;
  top: 77px;
  bottom: 0;
  background: url(./../../assets/images/zs-bg1.jpg) no-repeat left top;
  background-size: 100% 100%;
}
.login-container .box {
  width: 1200px;
  height: 653px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}
.login-container .marker {
  width: 106px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  bottom: 35px;
  z-index: 5;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.login-container .marker i {
  width: 30px;
  height: 4px;
  display: block;
  float: left;
  margin-right: 8px;
  background-color: #fff;
  opacity: 0.6;
  cursor: pointer;
}
.login-container .marker i.active {
  opacity: 1;
}
.login-container .marker i:last-child {
  margin-right: 0;
}
.login-container .left,
.login-container .block {
  width: 845px;
  height: 653px;
  position: relative;
}
.login-container .block {
  color: #fff;
  position: absolute;
}
.login-container .right {
  width: 342px;
}
.login-container .login {
  width: 342px;
  height: 326px;
  background: #fff;
  margin-bottom: 12px;
}
.login-container .block-1 {
  background: url(./../../assets/images/zs-xbg1.jpg) no-repeat left top;
  background-size: 100% auto;
}
.login-container .block-1 .intro {
  text-align: center;
}
.login-container .block-1 .intro h5 {
  font-size: 18px;
  font-weight: normal;
  line-height: 50px;
  padding-top: 130px;
}
.login-container .block-1 .intro h1 {
  font-size: 72px;
  width: 512px;
  height: 96px;
  line-height: 96px;
  margin: 0 auto;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.login-container .block-1 .intro p {
  line-height: 100px;
  font-size: 24px;
}
.login-container .block-1 .intro .span1 {
  margin-right: 30px;
}
.login-container .block-1 .intro img {
  position: relative;
  top: 3px;
  left: -2px;
}
.login-container .block-1 .count {
  width: 720px;
  position: relative;
  margin: 110px auto 0;
}
.login-container .block-1 .count .line {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 1px;
  height: 98px;
  background-color: #fff;
}
.login-container .block-1 .count img {
  margin-right: 16px;
}
.login-container .block-1 .count .txt p:nth-child(1) {
  font-size: 38px;
  font-weight: bold;
}
.login-container .block-1 .count .txt p:nth-child(2) {
  font-size: 20px;
}
.login-container .block-1 .count img {
  position: relative;
  top: 6px;
  left: -2px;
}
.login-container .block-2 {
  background: url(./../../assets/images/zs-xbg2.png) no-repeat left top;
  background-size: 100% auto;
}
.login-container .block-2 .title,
.login-container .block-2 .list {
  width: 788px;
  margin: 0 auto;
}
.login-container .block-2 .title {
  line-height: 76px;
  padding-top: 70px;
  padding-bottom: 14px;
  font-size: 24px;
  background: url(./../../assets/images/zs2-line.png) no-repeat left bottom;
}
.login-container .block-2 .title .tit {
  width: 50%;
  text-indent: 132px;
}
.login-container .block-2 .list-1,
.login-container .block-2 .list-2 {
  width: 380px;
  height: 372px;
  margin-top: 10px;
  overflow: hidden;
}
.login-container .block-2 .list li {
  width: 100%;
  height: 48px;
  line-height: 48px;
  border: 1px solid #fff;
  border-radius: 50px;
  text-align: center;
  margin-top: 14px;
}
.login-container .block-2 .list li span:nth-child(2) {
  margin: 0 20px;
}
.login-container .block-3 {
  background: url(./../../assets/images/zs-xbg3.jpg) no-repeat left top;
  background-size: 100% auto;
}
.login-container .block-3 .desc {
  width: 596px;
  margin: 0 auto;
  padding-top: 240px;
}
.login-container .block-3 .title {
  width: 163px;
  height: 50px;
  line-height: 50px;
  font-size: 28px;
  text-align: center;
  margin: 0 auto 10px;
  background: url(./../../assets/images/zs-kuang.png) no-repeat left top;
  background-size: 100% auto;
}
.login-container .block-3 .txt {
  font-size: 16px;
  line-height: 40px;
  text-align: justify;
  text-indent: 2em;
}
.login-container .block-3 .row {
  width: 712px;
  margin: 0 auto;
}
.login-container .block-3 .item {
  width: 218px;
  height: 95px;
  border: 1px solid #fff;
  margin-right: 12px;
  border-radius: 5px;
  cursor: pointer;
}
.login-container .block-3 .item:last-child {
  margin-right: 0;
}
.login-container .block-3 .item h5 {
  margin: 0;
  font-size: 18px;
  font-weight: normal;
  line-height: 36px;
  text-align: center;
}
.login-container .block-3 .item h5 img {
  position: relative;
  top: 3px;
  margin-right: 10px;
}
.login-container .block-3 .item p {
  width: 170px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
}
.login-container .block-3 .item:hover {
  background-color: #7181f2;
  border-color: #7181f2;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.login-container header.active-1 {
  background-image: url(./../../assets/images/zs-bg1-top.jpg);
}
.login-container header.active-2 {
  background-image: url(./../../assets/images/zs-bg2-top.jpg);
}
.login-container header.active-3 {
  background-image: url(./../../assets/images/zs-bg3-top.jpg);
}
.login-container content.active-1 {
  background-image: url(./../../assets/images/zs-bg1.jpg);
}
.login-container content.active-2 {
  background-image: url(./../../assets/images/zs-bg2.jpg);
}
.login-container content.active-3 {
  background-image: url(./../../assets/images/zs-bg3.jpg);
}
.login-form {
  padding: 40px 34px;
  .el-form-item {
    margin-bottom: 20px;
  }
  .welcome {
    padding-bottom: 20px;
    font-size: 18px;
    color: #2e84e1;
    text-align: center;
  }
  .yzcode {
    margin-bottom: 18px;
    .el-input__inner {
      height: 31px;
      line-height: 31px;
      position: relative;
      top: -4px;
    }
  }
}
.login-container {
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.7s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
  .login .login_username .el-input-group__prepend {
    padding: 0 18px;
  }
  footer {
    font-size: 16px;
    color: #fff;
    bottom: 30px;
    left: 0;
    width: 100%;
    text-align: center;
    position: fixed;
    span:nth-child(2) {
      margin: 0 24px;
    }
  }
}
@media screen and (max-height: 830px) {
  .login-container {
    .box {
      position: relative;
      top: 0;
      left: 0;
      z-index: 5;
      margin: 90px auto 90px;
      transform: translateX(0) translateY(0);
      -webkit-transform: translateX(0) translateY(0);
    }
  }
}
</style>
